# 导入必要的库
import streamlit as st  # 用于创建Web应用的框架
import pandas as pd  # 用于数据处理和分析
import numpy as np  # 用于数值计算和数组操作

import plotly.graph_objects as go  # 用于创建更加复杂的图标对象

# x下载方式  pip   install  plotly -i  清华源


# 页面配置 - 设置Streamlit页面的基本属性
st.set_page_config(
    page_title="炫酷数据仪表板",  # 浏览器标签页显示的标题
    page_icon="🚀",  # 浏览器标签页显示的图标
    layout="wide",  # 使用宽屏布局，充分利用屏幕空间
)

st.markdown("""
<style>
/*主背景的渐变  */
.main{
        background:linear-gradient(135deg,#6677aa 0%,#ff4400 100%)
}
/*标题的样式   */
  .main-title {
        font-size: 3.5rem;  /* 字体大小 */
        font-weight: bold;  /* 字体粗细 */
        /* 创建文字渐变效果 */
        background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4);
        -webkit-background-clip: text;  /* 将背景裁剪到文字区域 */
        -webkit-text-fill-color: transparent;  /* 文字颜色透明，显示背景 */
        text-align: center;  /* 文字居中 */
        margin-bottom: 2rem;  /* 底部外边距 */
        animation: glow 2s ease-in-out infinite alternate;  /* 添加发光动画效果 */
    }

    /* 定义发光动画的关键帧 */
    @keyframes glow {
        from { 
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073; 
        }
        to { 
            text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6; 
        }
    }

    /* 卡片样式 - 用于内容区域的卡片式设计 */
    .card {
        background: rgba(255, 255, 255, 0.1);  /* 半透明白色背景 */
        backdrop-filter: blur(10px);  /* 背景模糊效果，创建毛玻璃效果 */
        border-radius: 15px;  /* 圆角边框 */
        padding: 20px;  /* 内边距 */
        margin: 10px;  /* 外边距 */
        border: 1px solid rgba(255, 255, 255, 0.2);  /* 半透明边框 */
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);  /* 阴影效果 */
    }

    /* 指标卡片样式 - 专门用于显示数据指标的卡片 */
    .metric-card {
        background: linear-gradient(45deg, #FF6B6B, #4ECDC4);  /* 渐变背景 */
        color: white;  /* 文字颜色 */
        border-radius: 15px;  /* 圆角 */
        padding: 20px;  /* 内边距 */
        text-align: center;  /* 文字居中 */
        margin: 10px;  /* 外边距 */
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);  /* 阴影 */
        transition: transform 0.3s ease;  /* 添加变换动画效果 */
    }

    /* 鼠标悬停时的效果 */
    .metric-card:hover {
        transform: translateY(-5px);  /* 向上移动5像素，创建浮动效果 */
    }












</style>






""", unsafe_allow_html=True)


def create_animated_metrics():
    """
    创建动态指标卡片
    Returns:

    """
    # 创建4个等宽的列布局


col1, col2, col3, col4 = st.columns(4)

# 在第一列中创建收入指标卡片
with col1:
    st.markdown("""
       <div class="metric-card">
           <h3>📈 总收入</h3> 
           <h2>$1,234,567</h2>  
           <p>↑ 12.5% 同比增长</p>  
       </div>
       """, unsafe_allow_html=True)

# 在第二列中创建用户数指标卡片
with col2:
    st.markdown("""
           <div class="metric-card">
               <h3>📈 总收入</h3> 
               <h2>$1,234,567</h2>  
               <p>↑ 12.5% 同比增长</p>  
           </div>
           """, unsafe_allow_html=True)

# 在第三列中创建转化率指标卡片
with col3:
    st.markdown("""
           <div class="metric-card">
               <h3>📈 总收入</h3> 
               <h2>$1,234,567</h2>  
               <p>↑ 12.5% 同比增长</p>  
           </div>
           """, unsafe_allow_html=True)

# 在第四列中创建响应时间指标卡片
with col4:
    st.markdown("""
           <div class="metric-card">
               <h3>📈 总收入</h3> 
               <h2>$1,234,567</h2>  
               <p>↑ 12.5% 同比增长</p>  
           </div>
           """, unsafe_allow_html=True)


def create_3d_chart():
    """
    创建3D曲面图表
    Returns:
    """
    # 生成x、y轴的坐标点 从 -5到 5
    x = np.linspace(-5, 5, 50)
    y = np.linspace(-5, 5, 50)

    # 创建网格的坐标点矩阵
    X, Y = np.meshgrid(x, y)
    # 计算每一个点的z轴,z = sin(sqrt(x^2 + y^2))

    Z = np.sin(np.sqrt(X ** 2 + Y ** 2))

    # 创建3D曲面图
    fig = go.Figure(data=[go.Surface(z=Z, x=X, y=Y, colorscale='Viridis')])

    # 更新图表布局
    fig.update_layout(
        title="3D曲面图",
        autosize=True,  # 自动调整大小
        scene=dict(  # 3D场景设置
            xaxis_title='X轴',
            yaxis_title='Y轴',
            zaxis_title='Z轴',
        ),
        height=500  # 图标高度
    )
    return fig


# create_animated_metrics()

def main():
    """
    主函数----应用程序的入口点
    组织页面的布局和调用各个组件的函数

    Returns:
    """
    st.markdown("<h1 class ='main-title'>🚀炫酷数据仪表板</h1>", unsafe_allow_html=True)
    # 创建并显示动态指标卡牌
    create_animated_metrics()
    # 添加一个水平分隔符
    st.markdown("------")
    # 创建第一行的布局
    col1, col2, col3 = st.columns([1, 3, 1])
    with col2:
        st.markdown('<div class="card">', unsafe_allow_html=True)
        # 显示3D图表
        st.plotly_chart(create_3d_chart(), use_container_width=True)
        st.markdown('</div>', unsafe_allow_html=True)


if __name__ == "__main__":
    main()